<template>
<div class="scroll-wrap">
  <div class="detail-warp">
    <scroll class="detail" ref="scrollDiv">
      <div> 
        <div class="hd">
          <div class="image-header">
            <img :src="detailData.images?detailData.images[0].show_image:''">
            <!-- <div class="back" @click="goback">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-prev"></use>
              </svg><span class="text">返回</span>
            </div> -->
          </div>
          <h1 class="title">{{detailData.product_name}}</h1>
          <div class="extact">
            <div class="price">
              <span class="sale">{{detailData.price | formatMoney}}</span>
              <span class="del" v-show="detailData.original_price">{{detailData.original_price | formatMoney}}</span>
            </div>
            <div class="contact" @click="contact">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kefu"></use>
              </svg>
              <span class="text">联系客服</span>
            </div>
          </div>
          <div class="tags">
            <span class="tags-item" v-for="item in detailData.attr">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-ok"></use>
              </svg>
              <span class="text">{{item}}</span>
            </span>
          </div>
        </div>
        <div class="bd">
          <h2 class="title">商品详情</h2>
          <div class="detail-content" v-html="detailData.content" ref="content"></div>
        </div>
      </div>
    </scroll>
  <div class="btn-reserve" v-if="isPackage" @click="packageAction">立即预订</div>
  </div>
  <Package :cartProduct="cartProduct" ref="package" v-if="isPackage" />
  <!-- <Shopcart :cartProduct="cartProduct" :productData="detailData" v-else /> -->
</div>
</template>
<script>
import Shopcart from './shopcart'
import Package from './package'
import { mapGetters } from 'vuex'
import { formatMoney } from '@/utils'
import Scroll from './base/scroll'

export default {
  data() {
    return {
      firstSpec: false,
      isLoaded: false,
      timer: null
    }
  },
  computed: {
    ...mapGetters({
      detailData: 'getDetailData',
      normalCart: 'normalCart',
      specCart: 'specCart',
      isHideCart: 'isHideCart'
    }),
    isPackage() {
      let gift = this.detailData.package
      if (!gift) {
        return 0
      } else {
        return gift.length
      }
    },
    cartProduct() {
      if (this.isPackage) {
        return this.specCart
      } else {
        return this.normalCart
      }
    }
  },
  created() {
    this.getDetailDataFn()
  },
  beforeUpdate() {
    if (this.isPackage > 0) {
      this.$store.dispatch('setFilterNav', this.$route.fullPath)
    }
  },
  mounted() {
    let scrollDiv = this.$refs.scrollDiv
    this.timer = setInterval(() => {
      let imgArr = this.$refs.content.children
      let lastImg = imgArr[imgArr.length - 1]
      if (lastImg && lastImg.offsetHeight > 0 && !this.isLoaded) {
          this.isLoaded = true
          scrollDiv.refresh()
          clearInterval(this.timer)
      }
    }, 20)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    packageAction() {
      if (this.cartProduct.length) {
        this.$refs.package.show()
      } else {
        this.$store.dispatch('addToCart', {productData: this.detailData, type: 2})
      }
    },
    getDetailDataFn() {
      let id = this.$route.query.id
      if (id) {
        this.$store.dispatch('getDetailData', this.$route.query.id)
      }
    },
    contact() {
      /* eslint-disable */
      WeixinJSBridge.call('closeWindow')
    }
  },
  filters: {
    formatMoney(number) {
      return formatMoney(number, '￥')
    }
  },
  components: {
    Shopcart,
    Package,
    Scroll
  },
  watch: {
    $route: function () {
      this.getDetailDataFn()
    }
  }
}
</script>
<style lang="scss">
  @import '../assets/styles/detail';
</style>
